import styles from './index.less';
import React from 'react';
import { SplitBox } from '@antv/x6-react-components'
import '@antv/x6-react-components/es/split-box/style/index.css'

export default () => {
  return (
    <div className={styles.flowMain} style={{ height: 400 }}>
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          background: '#f5f5f5',
          userSelect: 'none',
        }}
      >
        <SplitBox
          split="horizontal"
          minSize={80}
          maxSize={-80}
          defaultSize={'80%'}
          primary="second"
        >
          <div
            style={{
              width: '100%',
              height: '100%',
              background: '#fff7e6',
            }}
          />
          <SplitBox
            split="vertical"
            minSize={40}
            maxSize={-160}
            defaultSize={240}
            primary="first"
          >
            <div
              style={{
                width: '100%',
                height: '100%',
                background: '#fff0f6',
              }}
            />
            <div
              style={{
                width: '100%',
                height: '100%',
              }}
            >
              <SplitBox
                split="vertical"
                minSize={40}
                maxSize={-80}
                defaultSize={'40%'}
                primary="second"
              >
                <div
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <SplitBox
                    split="horizontal"
                    minSize={40}
                    maxSize={-40}
                    defaultSize={80}
                    primary="first"
                  >
                    <div
                      style={{
                        width: '100%',
                        height: '100%',
                        background: '#e6f7ff',
                      }}
                    />
                    <div
                      style={{
                        width: '100%',
                        height: '100%',
                        background: '#e6fffb',
                      }}
                    />
                  </SplitBox>
                </div>
                <div
                  style={{
                    width: '100%',
                    height: '100%',
                    background: '#f6ffed',
                  }}
                />
              </SplitBox>
            </div>
          </SplitBox>
        </SplitBox>
      </div>
    </div>
  );
}
